<template>
	<view class="content">
		<view class="statistics_bg">
			<view class="statistics_content">
				<view class="item bg_1" style="margin-left: 4px;">
					<view class="statistics_text1">当月入库数量</view>
					<view class="statistics_text2">{{statisticsData.in_month}}</view>
					<view class="statistics_text4">KG</view>
				</view>
				<view class="item bg_2" style="margin-left: 10px;margin-right: 10px;">
					<view class="statistics_text1">当月出库数量</view>
					<view class="statistics_text2">{{statisticsData.out_month}}</view>
					<view class="statistics_text4">KG</view>
				</view>
				<view class="item bg_3" style="margin-right: 4px;">
					<view class="statistics_text1">当日入库数量</view>
					<view class="statistics_text2">{{statisticsData.in_today}}</view>
					<view class="statistics_text4">KG</view>
				</view>
			</view>
			
			<view class="statistics_content" style="margin-top: 10px;">
				<view class="item bg_1" style="margin-left: 4px;">
					<view class="statistics_text1">上月入库数量</view>
					<view class="statistics_text2">{{statisticsData.in_last_month}}</view>
					<view class="statistics_text4">KG</view>
				</view>
				<view class="item bg_2" style="margin-left: 10px;margin-right: 10px;">
					<view class="statistics_text1">上月出库数量</view>
					<view class="statistics_text2">{{statisticsData.out_last_month}}</view>
					<view class="statistics_text4">KG</view>
				</view>
				<view class="item bg_3" style="margin-right: 4px;">
					<view class="statistics_text1">昨天入库数量</view>
					<view class="statistics_text2">{{statisticsData.in_yesterday}}</view>
					<view class="statistics_text4">KG</view>
				</view>
			</view>
			
			<view class="statistics_content" style="margin-top: 10px;">
				<view class="item bg_4" style="margin-left: 4px;">
					<view class="statistics_text1">当日出库数量</view>
					<view class="statistics_text2">{{statisticsData.out_today}}</view>
					<view class="statistics_text4">KG</view>
				</view>
				<view class="item bg_4" style="margin-left: 10px;margin-right: 10px;">
					<view class="statistics_text1">昨日出库数量</view>
					<view class="statistics_text2">{{statisticsData.out_yesterday}}</view>
					<view class="statistics_text4">KG</view>
				</view>
				<view class="item">
				</view>
			</view>
		</view>
		
		<view class="uni-container statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view v-if="type==0" class="text">即时库存</view>
				<view v-if="type==1" class="text">安全库存</view>
				<view @click="onMoreClick1" class="text">>>查看更多</view>
			</view>
			<uni-table ref="table" border stripe v-if="type==0">
				<uni-tr>
					<uni-th width="40" align="center">原料名称</uni-th>
					<uni-th width="40" align="center">库存数量kg</uni-th>
					<uni-th width="40" align="center">预计销售数量</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData1" :key="index">
					<uni-td align="center">{{ item.wlmc }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.qty }}</view>
					</uni-td>
					<uni-td align="center">0</uni-td>
				</uni-tr>
			</uni-table>
			<uni-table ref="table" border stripe v-if="type==1">
				<uni-tr>
					<uni-th width="140" align="center">原料名称</uni-th>
					<uni-th width="30" align="center">库存数量kg</uni-th>
					<uni-th width="20" align="center">总托数</uni-th>
					<uni-th width="40" align="center">安全库存</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData1" :key="index">
					<uni-td align="center">{{ item.f_wlmc }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.weight }}</view>
					</uni-td>
					<uni-td align="center">{{ item.total_count}}</uni-td>
					<uni-td align="center">{{ item.safetystock}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		
		<view class="uni-container statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">即时库存明细</view>
				<view @click="onMoreClick2" class="text">>>查看更多</view>
			</view>
			<uni-table ref="table" border stripe v-if="type == 0">
				<uni-tr>
					<uni-th width="40" align="center">货架</uni-th>
					<uni-th align="center">物料名称</uni-th>
					<uni-th width="40" align="center">批次</uni-th>
					<uni-th width="40" align="center">数量pcs</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData2" :key="index">
					<uni-td align="center">{{ item.pod_code }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.f_wlmc_replaced }}</view>
					</uni-td>
					<uni-td align="center">{{ item.barcode }}</uni-td>
					<uni-td align="center">{{ item.f_totalquantity }}</uni-td>
				</uni-tr>
			</uni-table>
			<uni-table ref="table" border stripe v-if="type == 1">
				<uni-tr>
					<uni-th width="40" align="center">货架</uni-th>
					<uni-th width="40" align="center">原料名称</uni-th>
					<uni-th width="40" align="center">批次</uni-th>
					<uni-th width="40" align="center">数量pcs</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData2" :key="index">
					<uni-td align="center">{{ item.pod_code }}</uni-td>
					<uni-td align="center">
						<view class="name">{{ item.f_wlmc_replaced }}</view>
					</uni-td>
					<uni-td align="center">{{ item.f_ph_replaced }}</uni-td>
					<uni-td align="center">{{ item.f_realcount }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		
		<view class="statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">当前统计分析</view>
			</view>
			<qiun-data-charts 
			      type="pie"
			      :chartData="chartData"
			    />
		</view>
		
		<view class="statistics_bg">
			<view class="uni-flex uni-row" style="display: flex;flex-direction: row;justify-content: space-between;">
				<view class="text">仓库容量统计分析</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<l-circle v-model:current="modelVale" :percent="target" style="margin-top: 20px;margin-left: 20px;">
				    <view  style="display: flex;flex-direction: column;justify-content: center;">
						<text style="font-size: 20px;color: #55aa7f;">{{modelVale}}%</text>
						<text style="font-size: 14px;">{{ckData.used_count}}/{{ckData.total_count}}</text>
					</view>
				</l-circle>
		<!-- 		<view style="flex:1;">
					<qiun-data-charts
					      type="arcbar"
					      :chartData="chartData"
						  style="width: 40px;height: 40px"
					    />
				</view> -->
				<view class="uni-flex" style="margin-left: 40px;">
					<view class="volume_bg" style="height: 140rpx;width: 320rpx;border-radius: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view style="font-size: 24px;color: #F5A622;">{{ckData.total_count}}</view>
						<view style="font-size: 20px;color: #498FE2;">库位总数</view>
					</view>
					<view class="volume_bg" style="height: 140rpx;width: 320rpx;border-radius: 10px;margin-top: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<view style="font-size: 24px;color: #F5A622;">{{ckData.used_count}}</view>
						<view style="font-size: 20px;color: #498FE2;">已使用</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
	
	import {InventoryStatistics,RealTimeInventoryTop,RealTimeInventoryDetaiTop,InventoryPieChart,GetAllCount} from '../../common/inventory_api.js'
	
	export default {
		data() {
			return {
				type:0,//0:成品 1：原料
				statisticsData:{},
				tableData1:[],
				tableData2:[],
				chartData: {},
				opts:{
					
				},
				modelVale: 0,
				target: 50,
				ckData: {},
				buttonRect: {}
			}
		},
		onReady() {
			console.log("onReady")
			
			this.getNodeInfo();
			window.addEventListener('resize', this.getNodeInfo);
			uni.setNavigationBarTitle({
				title: "成品库存管理"
			})
			this.loadData();
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.getNodeInfo)
		},
		
		onNavigationBarButtonTap(e) {
			console.log("click menu");
			const that = this;
			uni.showActionSheet({
				title: '操作',
				itemList: ['成品库存管理', '原材料库存管理'],
				popover: {
					// 104: navbar + topwindow 高度，暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
					top: that.buttonRect.top + 104  + that.buttonRect.height,
					left: that.buttonRect.left + that.buttonRect.width / 2
				},
				success: (e) => {
					console.log(e.tapIndex);
					if (e.tapIndex == 0){
						uni.setNavigationBarTitle({
							title: "成品库存管理"
						})
						this.type = 0;
					} else if (e.tapIndex == 1){
						uni.setNavigationBarTitle({
							title: "原材料库存管理"
						})
						this.type = 1;
					} 
					this.loadData();
				}
			})
		},
		methods: {
			loadData(){
				InventoryStatistics(this.type).then(res=>{
					this.statisticsData = res[0];
				});
				
				RealTimeInventoryTop(this.type).then(res=>{
					if (this.type == 1){
						var array = [];
						for (var i = 0; i < res.length; i++) {
							var item = res[i];
							item.weight = parseFloat(item.weight.toFixed(2));
							item.safetystock = parseInt(item.safetystock);
							array.push(item);
						}	
						this.tableData1 = array;
					}
					else {
						this.tableData1 = res;
					}
					
				});
				
				RealTimeInventoryDetaiTop(this.type).then(res=>{
					var array = [];
					for (var i = 0; i < res.length; i++) {
						var item = res[i];
						if (item["f_wlbm_replaced"] == '') continue;
						array.push(item);
					}
					this.tableData2 = array; 
				});
				
				InventoryPieChart(this.type).then(res=>{
					var dataArray = [];
					for (var i = 0; i < res.length; i++) {
						var item = res[i];
						if (item.sl == 0) continue;
						var data = { "name": item.f_wlmc, "value": item.sl};
						dataArray.push(data);
					}
					let chartdata = {
						series: [ 
							{ 
								data: dataArray	
							}
						]
					};
					this.chartData = chartdata;
				});
				
				GetAllCount(this.type).then(res=>{
					console.log("GetAllCount", res);
					this.ckData = res[0];
					this.modelVale = parseFloat(((this.ckData.used_count / this.ckData.total_count) * 100).toFixed(2));
					console.log(this.modelVale);
					this.target = this.modelVale;
				});
			},
			
			// #ifdef H5
			getNodeInfo() {
				uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
					const rect = ret[0]
					if (rect) {
						this.buttonRect = rect
					}
				});
			},
			// #endif
			onMoreClick1(){
				console.log("onMoreClick1");
				uni.navigateTo({
					url: '/pages/inventory/inventory-detail?type=' + this.type
				});
			},
			
			onMoreClick2(){
				console.log("onMoreClick2");
				uni.navigateTo({
					url: '/pages/inventory/inventory-detail?type=' + (this.type + 2)
				});
			},
		},
	}
</script>

<style>
	@import url("inventory.css");
</style>
